<template>
  <view v-if="goodsDetail.goods_name">
   <!-- 轮播图 -->
   <swiper class="swiperBox" indicator-dots autoplay interval="2000" circular>
     <swiper-item class="swiperItem" v-for="(item,index) in goodsDetail.pics" :key="index">
       <image @click="preview(index)" class="swiperImg" :src="item.pics_big" mode="scaleToFill" ></image>
     </swiper-item>
   </swiper>
   <!-- 中间区域 -->
   <view class="middleBox">
     <!-- 上边盒子 -->
     <view class="top">¥ {{goodsDetail.goods_price}}</view>
     <!-- 中间信息区域 -->
     <view class="button">
       <!-- 商品名称 -->
       <view class="goodName">{{goodsDetail.goods_name}}</view>
       <view class="right">
         <uni-icons type="star" size="18"></uni-icons>
         <text>收藏</text>
       </view>
     </view>
     <view class="txt">快递 : 免运费</view>
   </view>
   <rich-text :nodes="goodsDetail.goods_introduce"></rich-text>
   <view class="goodNav">
     <uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
   </view>
  </view>
</template>

<script>
  import {mapState,mapMutations,mapGetters} from "vuex"
  export default {
    computed:{
      ...mapState('moduleCart', []),
      ...mapGetters('moduleCart',['total'])
    },
    watch:{
      // 1. 监听 total 值的变化，通过第一个形参得到变化后的新值
      total:{
        handler(newVal){
          let data = this.options.find(x => x.text ==="购物车")
          // 2. 通过数组的 find() 方法，找到购物车按钮的配置对象
            if(data) {
              // 3. 动态为购物车按钮的 info 属性赋值
              data.info = newVal
            }
        },
         immediate:true  
      }
    },
    data() {
      return {
        goodsDetail:{} , //商品详情
          options: [ {
                    icon: 'shop',
                    text: '店铺',
                    infoColor:"red"
                }, {
                    icon: 'cart',
                    text: '购物车',
                    info: 0
                }],
                buttonGroup: [{
                  text: '加入购物车',
                  backgroundColor: '#ff0000',
                  color: '#fff'
                },
                {
                  text: '立即购买',
                  backgroundColor: '#ffa200',
                  color: '#fff'
                }
                ]
      };
    },
    onLoad(options){
      // 获取商品id
      const id = options.goods_id
      this.getGoodsDetail(id)
    },
    methods:{
      ...mapMutations('moduleCart',['addShop']),
     async getGoodsDetail(goods_id){
       const {data:res} = await uni.$http.get('/api/public/v1/goods/detail',{goods_id})
       // console.log(res)
       // 判断请求是否发送成功
       if(res.meta.status !==200) return uni.$showMsg
       res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g,'<img style="display:block;"').replace(/.webp /g,".jpg")
       // 赋值
       this.goodsDetail = res.message
       },
       // 预览图片
       preview(i){
         // console.log(i)
          // 调用 uni.previewImage() 方法预览图片
         uni.previewImage({
           // 预览时，默认显示图片的索引
             current:i,
             urls:this.goodsDetail.pics.map(x => x.pics_big)
         })
       },
       // 点击底部导航的左侧
       onClick(e){
         // 判断点击的是否是购物车
         if(e.content.text==="购物车"){
           uni.switchTab({
             url:'/pages/cart/cart'
           })
         }
       },
       buttonClick(e){
         // 判断点击的是否是加入购物车按钮
         if(e.content.text==="加入购物车") {
           const data = {
             goods_id: this.goodsDetail.goods_id,       // 商品的Id
             goods_name: this.goodsDetail.goods_name,   // 商品的名称
             goods_price: this.goodsDetail.goods_price, // 商品的价格
             goods_count: 1,                           // 商品的数量
             goods_small_logo: this.goodsDetail.goods_small_logo, // 商品的图片
             goods_state: true          // 商品的勾选状态
           }
           this.addShop(data)
         }
       }
    }
  }
</script>

<style lang="scss">
.swiperBox{
  height: 750rpx;
  .swiperImg{
    width: 100%;
    height: 100%;
  }
}
.middleBox {
  padding: 10px;
  padding-right: 0;
  .top{
    font-size: 18px;
    color: #c00000;
    margin-bottom: 5px;
  }
  .button {
      display: flex;
      justify-content: space-between;
      // margin-bottom: 10px;
      .goodName{
        font-size: 13px;
        padding-right: 10px;
      }
      .right {
          width: 120px;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-left: 1px solid #efefef;
          color: gray;
      }
  }
  .txt {
    color: #a0a4a9;
    font-size: 13px;
    margin: 10px 0;
  }
}
.goodNav{
  position: fixed;
  left: 0;
  bottom:0;
  width: 100%;
}
</style>
